<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>userlit列表</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="user" v-cloak>
    <div style="margin-bottom: 6px;margin: 30px">
        <i-input v-model="content" placeholder="任务名称"  style="width: 300px"></i-input>
        <!-- @click="search()" @click="empty()" @click="add()"-->
        <i-button type="primary"  icon="ios-search">搜索</i-button>
        <i-button type="primary"  icon="ios-close-empty">清空</i-button>
        <i-button type="info" style="float: right;"  icon="person-add">新增</i-button>
    </div>
    <div style="margin-bottom: 6px;margin: 30px">
        <template>
            <i-table border :content="self" :columns="tableTitle" :data="userdata"></i-table>
            <br>
            <!-- 待实现分页功能 -->
            <!-- <Page :current="teacher.pageNumber" :total="tableSize" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page> -->
        </template>
    </div>
</div>
<!--iview ，vue的插件,
选择iview是一个不错的选择，而且它是一套基于 Vue.js 的高质量 UI 组件库！
iTable API:http://v1.iviewui.com/components/table
  -->
<script type="text/javascript">
    var vm = new Vue({
        el: '#user',
        data: {
            content : '',
            pageNo: 0,
            pageSize: 10,
            uid: "",
            userdata: [],
            tableTitle: [{
                key: "uid",
                title: "用户uid"
            }, {
                key: "username",
                title: "用户名"
            }, {
                key: "mobile",
                title: "手机号"
            }, {
                key: "assetbalance",
                title: "资产"
            }, {
                key: "score",
                title: "积分"
            },{
               key:"tdnum",
               title:"数字货币",
            },{
                key:"qbao",
                title:"Q宝",
            }, {
                title: '操作',
                key: 'action',
                width: 300,
                align: 'left',
                render: function (h,params) {//表达式
                    var functionList = [];//功能列表,定义动能按钮
                    var edit = h('Button', {
                        props : {
                            type : 'primary',
                            size : 'small',
                            icon : 'edit'
                        },
                        style : {
                            marginRight : '8px'
                        },
                        on : {
                            click : function() {
                                vm.edit(params.row);
                            }
                        }
                    }, '修改');
                    functionList.push(edit);//functionList功能列表


                    // 返回方法集合
                    return h('div', functionList);

                }

            }]
        },
        methods:{//methods写成method,找了半天才发现错误,一直说list()方法不存，在这
            //任务列表(自行实现分页)
            list1 : function() {
                console.log('list1');

                $.ajax({
                    url:"../user/userlist",
                    type:"post",
                    data:{'time':(new Date()).toString(),"pageNo":this.pageNo,'pageSize':this.pageSize},
                    success: function(result) {//返回的msg是list集合
                        vm.userdata = result.msg;
                    }
                });
            },
            //实现上面定义的方法
            edit : function (user) {
                console.log('edit');
                //打开一个模态对话框
                dialogOpen({
                    title: '修改',
                    url: 'user/userEdit.shtml',
                    //屏幕小 滚动条显示
                    scroll : true,
                    width: '450px',
                    height: '450px',
                    success : function(iframeId){
                        top.frames[iframeId].vm.userEntity = user;
                    },
                    yes : function(iframeId) {
                        top.frames[iframeId].vm.editClick();
                    },
                });
            }

        },
        created : function() {
            console.log('create1');
            this.list1();
        }

    });

</script>
</body>
</html>